<template>
	<view :class="[primarySize()]">
		<!-- <view class="page-foot">
			<Footer :identity="1" :footState="1"></Footer>
		</view> -->
		<view class="container">
			<view class="page-head bg-normal p30">
				<view class="search_nav flex-box">
					<view class="flex-box" @click="jumpLoacte">
					<image :src="iconPath('icon_address.png')" mode="widthFix" class="ico25"></image>
					<view class="address_nav fwb fs24 col1 m-ellipsis">{{currentDistrict?currentDistrict.name:'区域'}}
					</view>
					<image src="https://admin.mosizp.cn/static/public/arrow_down.png" mode="widthFix" class="ico17"></image>	
					</view>
					<input type="text" confirm-type="search" @confirm="search" v-model="query.q"
						placeholder="请输入关键词进行搜索" class="inp_nav flex-grow-1" placeholder-class="colnor" />
					<image src="https://admin.mosizp.cn/static/public/icon_search.png" mode="aspectFill" class="ico28" @click="search"></image>
				</view>
				<view class="tab_nav flex-box">
					<view class="tab_item flex-box flex-center flex-grow-1" @click="chooseItem(0)">
						<view class="col6 fs28">类别</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_up.png" v-if="filterTabIndex==0" mode="widthFix"
							class="ico13 ml20"></image>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" v-else mode="widthFix" class="ico13 ml20"></image>
					</view>
					<view class="tab_item flex-box flex-center flex-grow-1" @click="chooseItem(1)">
						<view class="col6 fs28">薪资</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_up.png" v-if="filterTabIndex==1" mode="widthFix"
							class="ico13 ml20"></image>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" v-else mode="widthFix" class="ico13 ml20"></image>
					</view>
					<view class="tab_item flex-box flex-center flex-grow-1" @click="chooseItem(2)">
						<view class="col6 fs28">其他</view>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_up.png" v-if="filterTabIndex==2" mode="widthFix"
							class="ico13 ml20"></image>
						<image src="https://admin.mosizp.cn/static/public/pop_arrow_down.png" v-else mode="widthFix" class="ico13 ml20"></image>
					</view>

				</view>
			</view>

			<view class="pt220 plr30">

				<job-list :jobs="jobList"></job-list>

				<view class="nothing" v-if="jobListMore.nothing">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
					<text>暂无职位</text>
				</view>
				<view class="g-btn3-wrap" v-else>
					<view class="g-btn3" @click="fetch()">{{jobListMore.text}}</view>
				</view>

			</view>
			<u-popup :show="showFilter" mode="top" :safeAreaInsetBottom="false" @close="bindClose"
				bgColor="transparent">
				<view class="popup" style="margin-top: 220rpx;">
					<template v-if="filterTabIndex==0">
						<view class="pop_scroll i">
							<scroll-view scroll-y class="pop_left">
								<view class="item m-ellipsis" :class="{active: filterTab2SubIndex==-1}"
									@click="bindCategoryPick(-1)">不限</view>
								<view class="item m-ellipsis" :class="{active: index==filterTab2SubIndex}"
									@click="bindCategoryPick(index)" v-for="(item,index) in categories">
									{{item.category_name}}</view>
							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30">
								<view class="scroll_item m-ellipsis" :class="{active: query.category_id==0}"
									@click="bindCategoryChange(0)">不限</view>
								<view class="scroll_item m-ellipsis" :class="{active: query.category_id==item.id}"
									@click="bindCategoryChange(item.id)" v-for="(item,index) in subCategories">
									{{item.category_name}}</view>

							</scroll-view>
						</view>
					</template>
					<template v-if="filterTabIndex==1">
						<view class="pop_scroll i">
							<scroll-view scroll-y class="pop_left">
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==0}"
									@click="bindTabSubIndexChange(0)">不限</view>
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==1}"
									@click="bindTabSubIndexChange(1)">按月结算</view>
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==2}"
									@click="bindTabSubIndexChange(2)">按天结算</view>
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==3}"
									@click="bindTabSubIndexChange(3)">按小时结算</view>

							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30" v-if="filterTab3SubIndex==1">
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==3 && !query.salary_option_id)?'active':''"
									@click="bindSalaryOptionChange" data-type="3" data-id="" data-min="" data-max="">不限
								</view>
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==3 && query.salary_option_id==item.id)?'active':''"
									@click="bindSalaryOptionChange" data-type="3" :data-id="item.id"
									:data-min="item.min||''" :data-max="item.max||''"
									v-for="(item,index) in monthlySalaryOptions">{{item.name}}</view>

							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30" v-if="filterTab3SubIndex==2">
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==2 && !query.salary_option_id)?'active':''" data-type="2"
									data-id="" data-min="" data-max="" @click="bindSalaryOptionChange">不限</view>
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==2 && query.salary_option_id==item.id)?'active':''"
									@click="bindSalaryOptionChange" v-for="(item,index) in dailySalaryOptions">
									{{item.name}}</view>

							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30" v-if="filterTab3SubIndex==3">
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==1 && !query.salary_option_id)?'active':''" data-type="1"
									data-id="" data-min="" data-max="" @click="bindSalaryOptionChange">不限</view>
								<view class="scroll_item m-ellipsis"
									:class="(query.salary_type==1 && query.salary_option_id==item.id)?'active':''"
									@click="bindSalaryOptionChange" v-for="(item,index) in hourlySalaryOptions">
									{{item.name}}</view>

							</scroll-view>
						</view>
					</template>
					<scroll-view scroll-y="true" v-if="filterTabIndex==2" class="pop_scroll">

						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">工作经验</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.work_experience_id?'':'active'"
									@click="bindQueryParamChange" data-param="work_experience_id" data-value="">不限
								</view>
								<view class="scroll_item m-ellipsis"
									:class="query.work_experience_id==item.id?'active':''" @click="bindQueryParamChange"
									data-param="work_experience_id" :data-value="item.id"
									v-for="(item,index) in workExperiences">{{item.name}}</view>
							</view>
						</template>
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">学历要求</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.education_level_id?'':'active'"
									@click="bindQueryParamChange" data-param="education_level_id" data-value="">不限
								</view>
								<view class="scroll_item m-ellipsis"
									:class="query.education_level_id==item.id?'active':''" @click="bindQueryParamChange"
									data-param="education_level_id" :data-value="item.id"
									v-for="(item,index) in educationLevels">{{item.name}}</view>
							</view>
						</template>
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">福利待遇</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis"
									:class="query.benefit_id==null||query.benefit_id.length==0?'active':''"
									@click="bindQueryParamChange" data-param="benefit_id" data-value=""
									data-multiple="true">不限</view>
								<view class="scroll_item m-ellipsis"
									:class="inArray(item.id,query.benefit_id)?'active':''" @click="bindQueryParamChange"
									data-param="benefit_id" :data-value="item.id" data-multiple="true"
									v-for="(item,index) in benefits">{{item.name}}</view>
							</view>
						</template>
						<!-- <template>
							<view class="city_item active">不限</view>
							<view class="city_item">锡林浩特市</view>
							<view class="city_item">二连浩特市</view>
							<view class="city_item">多伦县</view>
							<view class="city_item">苏尼特左旗</view>
							<view class="city_item">苏尼特右旗</view>
							<view class="city_item">阿巴嘎旗</view>
						</template> -->
						<view class="pt30"></view>
					</scroll-view>
					<view class="pop_bottom flex-box" v-if="filterTabIndex==2">
						<view class="bt1" @click="bindResetFormQuery">重置</view>
						<view class="bt2" @click="bindFormQueryConfirm">确认</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	import jobList from '../../components/job-list/job-list.vue';
	export default {
		components: {
			jobList
		},
		data() {
			return {
				
				seekJobType: null,
				currentDistrict: null,
				showFilter: false, //显示条件弹出层
				filterTabIndex: 0, //条件层tab index
				filterTab2SubIndex: -1,
				filterTab3SubIndex: 0,
				categories: [],
				subCategories: [],
				hourlySalaryOptions: [],
				dailySalaryOptions: [],
				monthlySalaryOptions: [],
				workExperiences: [],
				educationLevels: [],
				benefits: [],
				query: {
					q: '',
					category_id: 0,
					salary_type: '',
					salary_option_id: '',
					salary_min: '',
					salary_max: '',
					work_experience_id: '',
					education_level_id: '',
					benefit_id: []
				},
				jobList: [],
				jobListMore: {
					page: 1
				},

				refreshOnShow: false,
				districts: [],
				//nearbyArr: [1, 3, 5, 7, 10],
				refreshDayOptions: [3, 7, 15, 30]
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
			let page = this;
			this.currentCity = this.$core.getCurrentCity();
			this.currentDistrict = this.$core.getCurrentDistrict();
			// this.refreshPage();
			//未读消息
			// if (app.globalData.chat_config.SocketTask) {
			// 	chatIM.setMessageBadge(false)
			// }
			uni.$on(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
			uni.$on(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange, this);
			//uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount,this);
		},
		onShow() {
			var that = this;
			let seek_job_type = this.$core.getCache('seek_job_type') || '';
			let originSeekJobType = this.seekJobType;
			this.seekJobType = seek_job_type;
			if (seek_job_type !== originSeekJobType) {
				this.refreshOnShow = true;
			}
			if (this.refreshOnShow) {
				this.refreshOnShow = false;
				this.refreshPage();
			}
		},
		onUnload() {
			uni.$off(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
			uni.$off(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange);
			//uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onReachBottom() {
			this.fetch();
		},
		onPullDownRefresh() {
			this.refreshPage()
		},
		onShareAppMessage(e) {

		},
		onShareTimeline() {

		},
		methods: {
			search() {
				this.refresh();
			},
			jumpLoacte(){
				uni.navigateTo({
					url:'/pages/public/locate'
				})
			},
			//显示弹窗
			chooseItem(index) {
				this.showFilter = this.filterTabIndex == index ? !this.showFilter : true;
				this.filterTabIndex = index;
			},
			bindClose() {
				this.showFilter = false
				this.filterTabIndex = 0;
			},
			//一级分类
			bindCategoryPick(index) {
				if (index == -1) {
					//不限分类
					this.filterTab2SubIndex = index,
						this.query.category_id = 0;
					this.subCategories = [];
					this.refresh();
				} else {
					this.filterTab2SubIndex = index;
					this.subCategories = this.categories[index].childlist;
				}
			},
			// 选择二级分类
			bindCategoryChange(id) {
				this.query.category_id = id
				this.refresh();
			},
			bindTabSubIndexChange(index) {
				this.filterTab3SubIndex = index;
				if (index === 0) {
					//选择薪资类型不限
					this.query.salary_type = '';
					this.query.salary_min = '';
					this.query.salary_max = '';
					this.query.salary_option_id = '';
					this.refresh();
				}
			},
			//选择薪资
			bindSalaryOptionChange(event) {
				this.query.salary_type = event.currentTarget.dataset.type;
				this.query.salary_min = event.currentTarget.dataset.min;
				this.query.salary_max = event.currentTarget.dataset.max;
				this.query.salary_option_id = event.currentTarget.dataset.id;
				this.refresh();
			},
			//其他选择
			bindQueryParamChange(event) {
				let param = event.currentTarget.dataset.param,
					multiple = event.currentTarget.dataset.multiple || false;
				let value = event.currentTarget.dataset.value;
				value = value === true ? '' : value;
				if (multiple) {
					if (value == '') {
						this.query[param] = [];
						this.$forceUpdate();
						return;
					}
					if (!this.query[param]) {
						this.query[param] = [];
					}
					let index = this.query[param].indexOf(value);
					if (index >= 0) {
						this.query[param].splice(index, 1);
					} else {
						this.query[param].push(value);
					}
				} else {
					this.query[param] = value;
				}
				this.$forceUpdate();
			},
			//重置
			bindResetFormQuery: function() {
				this.query.work_experience_id = '';
				this.query.education_level_id = '';
				this.query.benefit_id = [];
			},
			bindFormQueryConfirm: function() {
				this.refresh();
			},
			refreshPage() {
				let page = this;
				// this.$util.getAreas().then(function(districts) {page.districts = districts;});

				this.$util.getJobCategories(2, false).then(categories => {
					page.categories = categories
				});

				this.$util.getSalaryOptions(1, false).then(options => {
					page.hourlySalaryOptions = options
				});
				this.$util.getSalaryOptions(2, false).then(options => {
					page.dailySalaryOptions = options
				});
				this.$util.getSalaryOptions(3, false).then(options => {
					page.monthlySalaryOptions = options
				});
				this.$util.getWorkExperienceOptions().then(options => {
					page.workExperiences = options
				});
				this.$util.getEducationLevels().then(levels => {
					page.educationLevels = levels
				});
				this.$util.getBenefits().then(benefits => {
					page.benefits = benefits
				});
				//获取定位
				this.$core.getLatLng({
					success: res => {
						this.query.pos = res.longitude + ',' + res.latitude;
						this.refresh();
					},
					fail: ret => {
						console.log(ret)
						this.refresh();
					}
				})
				uni.stopPullDownRefresh();
			},
			refresh: function(clearQuery = false) {
				this.jobList = [];
				this.jobListMore = {
					page: 1
				};
				this.showFilter = false;
				if (clearQuery) {
					this.query = {};
					this.filterTab1SubIndex = "0";
					this.filterTab2SubIndex = "-1";
					this.filterTab3SubIndex = "0";
				}
				this.fetch();
			},
			fetch: function() {
				let query = Object.assign({
					cate_type: this.seekJobType
				}, this.query);
				this.$util.fetch(this, '/xilujob.job/lists', query, 'jobListMore', 'jobList', 'data');
			},
			eventOnCurrentCityChange(currentCity) {
				this.currentCity = currentCity;
				let pages = getCurrentPages();
				//如果当前页面正在显示, 刷新此页； 否则下次显示时刷新
				if (pages[pages.length - 1] === this) {
					this.refreshPage();
				} else {
					this.refreshOnShow=true
				}
			},
			eventOnCurrentDistrictChange: function(currentDistrict) {
				this.currentDistrict = currentDistrict;
				this.refreshPage();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.search_nav {
		width: 690rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 0 30rpx;

		.address_nav {
			max-width: 112rpx;
			padding-left: 20rpx;
			padding-right: 15rpx;
		}

		.inp_nav {
			position: relative;
			margin-left: 30rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: var(--normalBlack);
			position: relative;
		}

		.inp_nav:before {
			content: '';
			width: 1px;
			height: 34rpx;
			background: #ECECEC;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}

	}

	.tab_nav {
		width: 100%;
		height: 74rpx;
		padding-top: 40rpx;

		.tab_item {
			height: 34rpx;
		}
	}

	.pt220 {
		padding-top: 220rpx;
	}

	.popup {
		background: #fff;

		.pop_tab_nav {
			height: 85rpx;
			padding: 0 45rpx;
		}

		.pop_scroll {
			height: 630rpx;
			padding: 0 0 0 45rpx;
			position: relative;

			&.i {
				padding: 0;
			}

			.pop_left {
				width: 200rpx;
				height: 100%;
				float: left;
				background: #fff;
			}

			.pop_left .item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-right: 20rpx;
				padding-left: 40rpx;
				color: #333333;
				position: relative;
				font-size: 28rpx;
			}

			.pop_left .item.active {
				color: var(--primary);
			}

			.pop_left .item.active::after {
				content: '';
				position: absolute;
				z-index: 1;
				width: 5rpx;
				height: 80rpx;
				display: block;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				background: var(--primary);
				border-radius: 5rpx;
			}

			.pop_right {
				float: left;
				width: 550rpx;
				height: 100%;
				background: #F6F8FE;
			}

			.scroll_item {
				border: 1px solid #F5EEEE;
				width: 152rpx;
				height: 65rpx;
				line-height: calc(65rpx - 2px);
				text-align: center;
				color: #666666;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
				margin-top: 20rpx;
				padding: 0 10rpx;
				display: inline-block;
				vertical-align: top;

				&.active {
					border: 1px solid var(--primary);
					color: var(--primary);
				}
			}
		}

		.pop_bottom {
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			padding-left: 45rpx;
			padding-right: 30rpx;

			.bt1 {
				width: 152rpx;
				height: 74rpx;
				background: rgba(0, 103, 211, .1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: var(--primary);
				line-height: 74rpx;
				text-align: center;
			}

			.bt2 {
				margin-left: 35rpx;
				width: 486rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background: var(--primary);
				border-radius: 8rpx;
			}
		}

		.city_item {

			font-size: 26rpx;
			color: #333333;
			line-height: 100rpx;

			&.active {
				font-weight: bold;
				color: var(--primary);
			}
		}
	}

	.page-head {
		z-index: 99999;
	}

	.ico13 {
		width: 13rpx;
		height: 8rpx;
	}
</style>